<template>
  <div class="cu-common-layout">
    <div class="cu-common-layout-center my-body-container">
        <grid-layout  :layout.sync="layout" :row-height="40" >
          <grid-item  :x="0" :y="0" :w="4" :h="3" :i="1" :key="1" static>
            <div style='background-color: #fff; width: 100%; height: 100%; padding: 0 20px; display: flex; justify-content: space-between;align-items: center'>
              <div style='display: flex; flex-direction: column'>
                <span style='color: #7a7a7a; font-size: 18px; display: block'>年度师训发布总数</span>
                <span style='color: #333333; font-size: 28px; font-weight: bold; display: block; margin-top: 10px'>{{trainPublishCount}}</span>
              </div>
              <div>
                <img  src='./image/wx.png' />
              </div>
            </div>
          </grid-item>
          <grid-item  :x="0" :y="3" :w="4" :h="3" :i="2" :key="2" static>
            <div style='background-color: #fff; width: 100%; height: 100%; padding: 0 20px;display: flex;flex-direction: column;'>
              <div style='border-bottom: 1px solid #d3d2d2;display: flex; justify-content: space-between;align-items:center '>
                <div style='display: flex; flex-direction: column;padding: 20px 0;'>
                  <span style='color: #7a7a7a; font-size: 18px; display: block'>年度参训总人数</span>
                  <span style='color: #333333; font-size: 28px; font-weight: bold; display: block; margin-top: 10px'>{{totalTrainees}}</span>
                </div>
                <div>
                  <img  src='./image/rs.png' />
                </div>
              </div>
              <div style='display: flex; align-items: center; flex-grow: 1;flex-shrink: 1;min-height: 0'>
                <span style='color: #b0b3be; font-size: 14px'>{{totalTraineesLabel.join('|')}}:</span>
                <span style='color: #22aeff; font-size: 14px'>{{totalTraineesValue.join('|')}}</span>
              </div>
            </div>

          </grid-item>
          <grid-item  :x="0" :y="6" :w="4" :h="3" :i="3" :key="3" static>
            <div style='background-color: #fff; width: 100%; height: 100%; padding: 0 20px;display: flex;flex-direction: column;'>
              <div style='border-bottom: 1px solid #d3d2d2;display: flex; justify-content: space-between;align-items:center '>
                <div style='display: flex; flex-direction: column;padding: 20px 0;'>
                  <span style='color: #7a7a7a; font-size: 18px; display: block'>年度结业总人数</span>
                  <span style='color: #333333; font-size: 28px; font-weight: bold; display: block; margin-top: 10px'>{{totalGraduates}}</span>
                </div>
                <div>
                  <img  src='./image/mz.png' />
                </div>
              </div>
              <div style='display: flex; align-items: center; flex-grow: 1;flex-shrink: 1;min-height: 0'>
                <span style='color: #b0b3be; font-size: 14px'>{{totalGraduatesLabel.join('|')}}:</span>
                <span style='color: #22aeff; font-size: 14px'>{{totalGraduatesValue.join('|')}}</span>
              </div>
            </div>
          </grid-item>
          <grid-item  :x="4" :y="0" :w="4" :h="9" :i="4" :key="4" static>
            <TrainPieRegionChart  propsApi='panel/two'   title="校长岗位训" />
          </grid-item>
          <grid-item  :x="8" :y="0" :w="4" :h="9" :i="5" :key="5" static>
            <TrainTeacherPieRegionChart  propsApi='panel/two'   title="老师岗位训" />
          </grid-item>
          <grid-item  :x="0" :y="9" :w="12"  :i="6" :h='8' :key="6" static>
            <el-card shadow="never" class="portal-eChart-box">
              <div slot="header" class="portal-common-title">
                <span>月度统计</span>

                <div style="width: 250px;position: absolute;  top: 13px;    z-index: 10000;   right: 65px; display: flex;">
                  <el-select v-model="searchValue" placeholder="请选择" @change="this.searchPanel">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                  <el-select v-model="threeSeach.brand" placeholder="请选择" style='margin-left: 10px'>
                    <el-option :key="item.id" :label="item.fullName" :value="item.enCode" v-for="item in brandOptions" />
                  </el-select>
                </div>
              </div>
              <div class="eChart-box-body" style='display: flex; flex-direction: column;'>
                <div style='display: flex;justify-content: space-between; margin-bottom: 15px'>
                  <div style='display: flex; flex-direction: column; align-items: center'>
                    <span style='color: #519bff; font-size: 28px; font-weight: bold'>{{monthTatol.trainCount}}</span>
                    <span style='color: #7d7d7d; font-size: 16px'>培训场次</span>
                  </div>
                  <div style='display: flex; flex-direction: column; align-items: center'>
                    <span style='color: #519bff; font-size: 28px; font-weight: bold'>{{monthTatol.signCount}}</span>
                    <span style='color: #7d7d7d; font-size: 16px'>报名人数</span>
                  </div>
                  <div style='display: flex; flex-direction: column; align-items: center'>
                    <span style='color: #519bff; font-size: 28px; font-weight: bold'>{{monthTatol.campusCount}}</span>
                    <span style='color: #7d7d7d; font-size: 16px'>参训校区</span>
                  </div>
                  <div style='display: flex; flex-direction: column; align-items: center'>
                    <span style='color: #519bff; font-size: 28px; font-weight: bold'>{{monthTatol.completeCount}}</span>
                    <span style='color: #7d7d7d; font-size: 16px'>结业人数</span>
                  </div>
                  <div style='display: flex; flex-direction: column; align-items: center'>
                    <span style='color: #519bff; font-size: 28px; font-weight: bold'>{{monthTatol.totalAmount}}</span>
                    <span style='color: #7d7d7d; font-size: 16px'>月度业绩</span>
                  </div>
                </div>

                <custom-table  :data="list" :hasNO='false' style='flex-grow: 1;flex-shrink: 1; mix-height: 150px; overflow-y: auto'>
                  <el-table-column prop="trainName" label="名称" align="left" show-overflow-tooltip />
                  <el-table-column prop="trainDate" label="培训时间" align="left"  show-overflow-tooltip />
                  <el-table-column prop="brand" label="适用范围" align="left"  show-overflow-tooltip />
                  <el-table-column prop="address" label="培训方式" align="left"  show-overflow-tooltip />
                  <el-table-column prop="totalSignups" label="报名人数" align="left"  show-overflow-tooltip />
                  <el-table-column prop="count1" label="S1校区" align="left"  show-overflow-tooltip />
                  <el-table-column prop="count2" label="S2校区" align="left"  show-overflow-tooltip />
                  <el-table-column prop="count3" label="S3校区" align="left"  show-overflow-tooltip />
                  <el-table-column prop="status" label="状态" align="left" show-overflow-tooltip />
                </custom-table>
              </div>
            </el-card>
          </grid-item>
        </grid-layout>
    </div>
  </div>
</template>
<script>
export { default } from './index.js'
</script>
<style  lang='scss'>
.my-body-container{
  width: 100%;
  overflow-y: auto;
}
.static {
  .el-card{
    height: 100%;
  }
}
</style>
